import React, { Component } from "react";
import { CheckCircleOutlined, StopOutlined, EyeOutlined, PlusCircleOutlined, DeleteOutlined } from '@ant-design/icons';
import { Button, message, Divider, } from "antd";
import { getSquareWorksList, squareExamine, getSquareListRes, getSquareList, deleteSquareWork } from "@/api/square";
import TableComponent from '@/components/TableList';
import SearchHeader from '@/components/SearchHeader';
import Viewworks from './components/viewWorks'
import Addworks from './components/addWorks'
import { getToolTip, getStatus } from '@/utils/renderCell'
import { widgetProps, SQUARE_TYPE, SQUARE_STATUS } from '@/utils/constant';
class User extends Component {
  tableRef = React.createRef();
  state = {
    list: [],
    listQuery: {},
    // 作品展示
    workType: 1,
    workList: [],
    squareList: [],
    viewVisiable: false,
    addVisiable: false,
  };

  componentDidMount() {
    getSquareList({
      pageNum: 1,
      pageSize: 999
    }).then(res => {
      this.setState({
        squareList: res.data.list
      })
    })
  }


  // 表格数据更新 抛出数据
  handleGetData = data => {
    this.setState({
      list: data.list
    })
  }
  // 处理搜索
  handleSearch = (listQuery) => {
    this.setState({
      listQuery
    });
  };

  addOk = () => {
    this.setState({
      addVisiable: false,
      listQuery: {
        ...this.state.listQuery,
        pageNum: 1
      }
    });
  }

  handleExamine = (row, status) => {
    const { id } = row
    squareExamine({ workId: id, status }).then(res => {
      message.success(status === 1 ? "审核通过" : "审核不通过")
      this.tableRef.current.fetchData();
    })
  }

  handleViewWorks = row => {
    if (row.type === 0) return;
    getSquareListRes({ id: row.id }).then(res => {
      const { data } = res;
      if (data && Array.isArray(data)) {
        this.setState({
          workType: row.type,
          workList: data,
          viewVisiable: true
        })
      }
    });
  };

  handleDeleteWorks = row => {
    deleteSquareWork({
      id: row.id
    }).then(() => {
      message.success('删除成功')
      this.tableRef.current.fetchData();
    })
  };

  handleAddWork = () => {
    this.setState({
      addVisiable: true,
      workList: [],
      workType: 1
    });
  };

  onCancel = () => {
    this.setState({
      workType: 1,
      workList: [],
      viewVisiable: false,
      addVisiable: false,
    })
  };

  // 头部搜索区域配置
  meta = {
    fields: [
      {
        key: 'cateId',
        label: '广场分类ID',
        widgetProps
      },
      {
        key: 'userName',
        label: '发布者姓名',
        widgetProps
      },
      // 0-纯文字 1-图片 2-视频
      {
        key: 'type',
        label: '作品类型',
        widgetProps,
        widget: 'select',
        options: [
          {
            label: SQUARE_TYPE[0],
            value: 0
          },
          {
            label: SQUARE_TYPE[1],
            value: 1
          },
          {
            label: SQUARE_TYPE[2],
            value: 2
          }
        ]
      },
      // 审核状态：0-未审核 1-审核通过 2-审核不通过
      {
        key: 'status',
        label: '审核状态',
        widgetProps,
        widget: 'select',
        options: [
          {
            label: SQUARE_STATUS[0],
            value: 0
          },
          {
            label: SQUARE_STATUS[1],
            value: 1
          },
          {
            label: SQUARE_STATUS[2],
            value: 2
          }
        ]
      }
    ],
  };

  // 表格列 字段定义
  columns = [
    {
      title: '作品ID',
      dataIndex: 'id',
      key: 'id',
      width: 80,
    },
    {
      title: '作品流水号',
      dataIndex: 'code',
      key: 'code',
      width: 280,
    },
    {
      title: '作品类型',
      dataIndex: 'type',
      key: 'type',
      width: 150,
      render: value => (<span>{SQUARE_TYPE[value]}</span>)
    },
    {
      title: '作品描述信息',
      dataIndex: 'textContent',
      width: 180,
      ellipsis: true,
      key: 'textContent',
      render: getToolTip
    },
    {
      title: '广场分类名称',
      dataIndex: 'cateName',
      width: 120,
      key: 'cateName',
    },
    {
      title: '发布者ID',
      dataIndex: 'memberId',
      width: 120,
      key: 'memberId',
    },
    {
      title: '发布者昵称',
      dataIndex: 'nickName',
      width: 150,
      key: 'nickName',
    },
    {
      title: '作品积分价格',
      dataIndex: 'price',
      width: 150,
      key: 'price',
    },
    {
      title: '限制级别',
      dataIndex: 'level',
      width: 120,
      key: 'level',
    },

    {
      title: '审核状态',
      dataIndex: 'status',
      key: 'status',
      width: 120,
      render: getStatus
    },
    {
      title: '作品发布时间',
      dataIndex: 'createTime',
      width: 180,
      key: 'createTime',
    },
    {
      title: '最后修改时间',
      dataIndex: 'updateTime',
      width: 180,
      key: 'updateTime',
    },
    {
      title: '操作',
      key: 'action',
      width: 450,
      fixed: 'right',
      render: (row) => (
        <span>
          <Button type="primary" icon={<CheckCircleOutlined />} title="agree" onClick={this.handleExamine.bind(null, row, 1)} >通过</Button>
          <Divider type="vertical" />
          <Button type="primary" icon={<StopOutlined />} title="disagree" onClick={this.handleExamine.bind(null, row, 2)} >不通过</Button>
          <Divider type="vertical" />
          <Button type="primary" icon={<EyeOutlined />} title="view" onClick={this.handleViewWorks.bind(null, row)} >看作品</Button>
          <Divider type="vertical" />
          <Button type="primary" icon={<DeleteOutlined />} title="delete" onClick={this.handleDeleteWorks.bind(null, row)} >删除</Button>
        </span>
      )
    }
  ];


  render() {
    return (
      <>
        <SearchHeader onSearch={this.handleSearch} meta={this.meta} >
          <Button type='primary' onClick={this.handleAddWork} icon={<PlusCircleOutlined />}>发布作品</Button>
        </SearchHeader>
        <br />
        <TableComponent
          tableConfig={{
            scroll: { y: 600, x: 1000 }
          }}
          getTableListApi={getSquareWorksList}
          columns={this.columns}
          queryParams={this.state.listQuery}
          ref={this.tableRef}
          onGetData={this.handleGetData} />
        {/* 查看作品 */}
        <Viewworks
          visible={this.state.viewVisiable}
          list={this.state.workList}
          workType={this.state.workType}
          onCancel={this.onCancel}
        />
        {/* 发布作品 */}
        <Addworks
          visible={this.state.addVisiable}
          squareList={this.state.squareList}
          workType={this.state.workType}
          list={this.state.workList}
          onCancel={this.onCancel}
          onAddOk={this.addOk}
        />
      </>
    );
  }
}

export default User;
